<template>
  <div class="container">
    <div class="header-left">
      <div class="left-container">  
        <div class="logo">
            <RouterLink to="/">
                GALAXA
            </RouterLink>
          </div>
          <div class="search">
            <button @click="handleSearch"> <SearchIcon /> </button>
            <input placeholder="搜索" v-model="searchInput" @keyup.enter="handleSearch"/>
        </div>
    </div>
        <ul class="menu">
          <li>
            <RouterLink to="/">
              首页
          </RouterLink>
        </li>
        <li>
          <RouterLink to="/category">
            分类
          </RouterLink>
        </li>
        </ul>
      
    </div>
    <div class="header-right">
      <div class="login" @click="handleLogin">
       登录
      </div>
    
  </div>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SearchIcon from './icons/SearchIcon.vue';
import Swal from 'sweetalert2';
import { searchLinks } from '@/service/links/links';
import { useLinkStore } from '@/stores/linkStore';
import { useRouter } from 'vue-router';

const linkStore = useLinkStore();
const router = useRouter();
const handleLogin = () => {
  // 暂时无法登录
  Swal.fire({
    title: '登录',
    text: '暂时无法登录',
    icon: 'warning',
  })
}
const searchInput = ref('');
// 搜索
const handleSearch = async () => {
  const res = await searchLinks(searchInput.value);
  linkStore.setSearchResults(res.data);
  router.push('/');
  searchInput.value = '';
}



</script>


<style scoped lang="less">
.container {
  margin: 0 auto;
  width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  .header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 720px;
    .left-container {
      display: flex;
      align-items: center;
      justify-content: space-between; 
      padding-left: 10px;   
    }
      .logo {
        margin-right: 20px;
       font-weight: bold;
       font-size: 20px;
       a {
        color: var(--color);
       }
    }
    
    .search {
      width: 250px;
      border-radius: 15px;
      border: 1px solid var(--color-border);
      height: 30px;
      display: flex;
      justify-content: space-between;
      input {
        border: none;
        outline: none;
        height: 100%;
        flex: 1;
        // padding: 0 10px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      button {
        border: none;
        outline: none;
        background-color: #fff;
        border-radius: 15px;
        padding: 0 10px;
      }
    }
    .menu {
      
      display: flex;
      li {
        margin-right: 20px;
        a {
          color: var(--color);
          font-weight: bold;
        }
      }
    }
  }
  .header-right {
    .login {
      color: var(--color);
      font-weight: var(--font-weight);
    }
  }
  .header-right{
    .login {
      color: var(--color);
      font-weight: var(--font-weight);
    }

    .login:hover {
      cursor: pointer;
    }
  }
}


@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-left {
    width: 100%;
    .search {
      width: 100%;
    }
  }
  .header-right {
    display: none;
  }
}
</style>
